<template>
  <view class="container" v-if="!isLoading" :style="'background-image:url('+$xyfun.image('/static/parttime/rute_bg.png')+')'">
    <view class="crumb">
      <view v-for="(val,idx) in statusList" :class="status==val.status?'active':''" @tap="statusChange(val.status)">{{val.text}}</view>
    </view>
    <view class="lists" v-if="lists.length>0">
      <view class="bg-w wa m-t-20 br-10 p-20" v-for="(item,index) in lists" @tap="$xyfun.to('/pages/job/job_detail?id='+item.job_id)">
        <view class="flex just-sb">
          <view>{{ item.job.demand }}</view>
          <view class="tc-r">{{ item.job.grade }}{{ item.job.subject}}</view>
        </view>
        <view class="flex f-nowrap just-sb fx-grow m-t-20">
          <view class="ts-24 tc-777">
            <view>上课时间：{{item.job.learn_date}} {{item.job.learn_time}}</view>
            <view>性别要求：{{item.job.sex}}</view>
            <view>学生情况：{{item.job.state}}</view>
          </view>
          <view class="ts-22 m-l-50 tc" style="width: 200rpx;">
<!--            <view class="m-t-10 but" @click.stop="$xyfun.phone(item.job.mobile)">立即联系</view>-->
            <view class="m-t-10 but" @click.stop="overOrder(item.id)" v-if="item.status==2">完结订单</view>
            <view class="m-t-10 but" @click.stop="platformIntervention(item.id)" v-if="(item.status==2 || item.status==3) && item.normal==1">平台介入</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <xy-empty text="暂无数据" />
    </view>

  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty/index.vue';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {
      isLoading:true,
      status : '1',
      statusList: [
        {
          status : '1',
          text : '已接单'
        },
        {
          status : 2,
          text : '已应聘'
        },
        {
          status : 3,
          text : '已完成'
        },
      ],
      lists: [],
      currentPage: 1,
      lastPage: 1,

    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {
    if(options?.status){
      this.status = options.status;
    }
    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(){
      this.$api.postBase({
        url: '/staff_order/lists',
        loadingTip:'加载中...',
        data: {
          status: this.status,
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.lists = [...this.lists, ...res.data];
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
        }
      });
    },


    //完结订单
    overOrder(order_id){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.staff_over_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url : '/staff_order/overOrder',
              loadingTip: '加载中...',
              data : {
                order_id : order_id,
              },
              success: res=>{
                that.lists = [];
                that.loadData();
              }
            })
          }
        }
      });

    },

    //平台介入
    platformIntervention(order_id){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.staff_interven_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url : '/staff_order/platformIntervention',
              loadingTip: '加载中...',
              data : {
                order_id : order_id,
              },
              success: res=>{
                that.lists = [];
                that.loadData();
              }
            })
          }
        }
      });

    },

    reloadData(){
      this.lastPage = 1;
      this.currentPage = 1;
      this.lists = [];
      this.loadData();
    },

    //订单状态筛选
    statusChange(e){
      this.status = e;
      this.lastPage = 1;
      this.currentPage = 1;
      this.lists = [];
      this.loadData();
    },


  }
}
</script>

<style scoped lang="scss">
.container{
  min-height: 100vh;
  background-size: 100%;
  overflow: hidden;
}
.crumb {
  display: flex;
  justify-content: space-evenly;
  background: #fff;
  padding-top: 20rpx;
  view{
    height: 80rpx;
  }
  .active {
    color: #00baad;
    border-bottom: 8rpx solid #00baad;
    padding-bottom: 20rpx;
    border-radius: 4rpx;
  }
}
.lists{
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;
  .item{
    white-space: nowrap;
    background: #ededed;
    color: #999;
    min-width: 100rpx;
    font-size: 24rpx;
    margin-bottom: 20rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
  }
  .act{
    background: #e3f8f1;
    color: #49cec4;
  }
}

.but{
  color: #00baad;
  background: #e6f9f7;
  font-size: 20rpx;
  padding: 2rpx;
  margin-left: 20rpx;
}

.com_grade{
  display: flex;
  margin-top: 30rpx;
  margin-bottom: 40rpx;
  view{
    font-size: 36rpx;
    margin-right: 20rpx;
    color: #c1c1c1;
  }
}
.comment{

  textarea{
    z-index: 0;
  }
  .combut{
    background: #ed8c1b;
    color: #fff;
    width: 300rpx;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 30rpx;
    text-align: center;
    float: right;
  }
}
</style>
